<template>
    <el-card
        shadow="never"
        class="police-situation-items"
    >
        <template #header>
            <div class="police-user">
                <div class="department-personnel">
                    <span>其他执勤法警 (鼠标悬停法警姓名显示执勤任务)</span>
                </div>
            </div>
        </template>

        <ul class="user-list">
            <li class="user-items" v-for="item in userList" :key="item.objectId">
                <el-tooltip
                    effect="dark"
                    :content="item.taskName||item.taskName2"
                    placement="top"
                >
                    <div class="user-info">
                        <el-avatar
                            src="/avatar.jpg"
                        />
                        <span class="name">{{ item.actUserName }}</span>
                    </div>
                </el-tooltip>
            </li>
        </ul>
    </el-card>
</template>

<script setup>
import {getOnDutyPoliceList} from "@/api/Schedule/Schedule.js";

const {unitId} = defineProps(['unitId']);
const userList = ref([])
watch(() => unitId, (newValue) => {
    getList(newValue)
});

onMounted(() => {
    getList(unitId)
});

const getList = async (id) => {
    const res = await getOnDutyPoliceList(String(id))
    userList.value = res.data
}
</script>

<style>
.police-situation-items .el-card__header {
    background: var(--el-color-primary-light-9);
}
</style>
<style scoped lang="scss">
.police-situation-items {
    margin-bottom: 20px;
    border-radius: 0;
    border: 1px solid var(--el-card-border-color);
    border-top: 1px solid var(--el-card-border-color);
}


.police-user {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .department-personnel {
        font-size: 14px;
        line-height: 22px;
    }

    .handles {
    }
}

.user-list {
    padding: 0;
    list-style: none;
    display: grid;
    align-items: start;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: 10px;

    .user-items {
        margin-bottom: 0.625rem;

        .user-info {
            display: flex;
            flex-direction: column;
            align-items: center;

            .name {
                font-size: 12px;
                line-height: 20px;
            }
        }
    }
}
</style>